<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>恋爱爱爱爱爱爱</title>
  </head>

  <body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <form action="http://urlll/submit" method="post" name="signup">
      <table width="700px">
        <!-- 第一行 -->
        <tr>
          <td>性别</td>
          <td>
            <input type="radio" name="sex" id="male" /><label for="male"><img src="/images/man.jpg" />男</label>
            <input type="radio" name="sex" id="female" /><label for="female"><img src="/images/women.jpg" />女</label>
          </td>
        </tr>
        <!-- 第二行 -->
        <tr>
          <td>生日</td>
          <td>
            <select>
              <option>--请选择年--</option>
              <option>2077</option>
              <option>2078</option>
            </select>
            <select>
              <option>--请选择月--</option>
              <option>13</option>
              <option>14</option>
            </select>
            <select>
              <option>--请选择日--</option>
              <option>31</option>
              <option>77</option>
            </select>
            <br />
          </td>
        </tr>
        <!-- 第三行 -->
        <tr>
          <td>所在地区</td>
          <td>
            <input text="text" name="area" id="area" value="上海思密达" />
          </td>
        </tr>
        <!-- 第四行 -->
        <tr>
          <td>婚姻状况</td>
          <td>
            <input type="radio" name="sex" id="unmarried" checked /><label for="unmarried">未婚</label>
            <input type="radio" name="sex" id="married" /><label for="married">已婚</label>
            <input type="radio" name="sex" id="dismarried" /><label for="dismarried">离婚</label>
          </td>
        </tr>
        <!-- 第五行 -->
        <tr>
          <td>学历</td>
          <td>
            <input text="text" name="education" id="education" value="幼儿园" />
          </td>
        </tr>
        <!-- 第六行 -->
        <!-- TODO：如何在选中前四个选项时自动取消勾选都喜欢这个选项？ -->
        <tr>
          <td>喜欢的类型</td>
          <td>
            <input type="checkbox" name="type" id="type1" /><label for="type1">妩媚的</label>
            <input type="checkbox" name="type" id="type2" /><label for="type2">可爱的</label>
            <input type="checkbox" name="type" id="type3" /><label for="type3">小鲜肉</label>
            <input type="checkbox" name="type" id="type4" /><label for="type4">老腊肉</label>
            <input type="checkbox" name="typeall" id="type5" checked /><label for="type5">都喜欢</label>
          </td>
        </tr>
        <!-- 第七行 -->
        <tr>
          <td>自我介绍</td>
          <td><textarea name="content" id="content" cols="30" rows="2"></textarea></td>
        </tr>
        <!-- 第八行 -->
        <tr>
          <td></td>
          <td><input type="submit" value="免费注册" /></td>
        </tr>
        <!-- 第九行 -->
        <tr>
          <td></td>
          <td><input type="radio" id="agree" /><label for="agree">俺同意注册条款和会员加入标准</label></td>
        </tr>
        <!-- 第十行 -->
        <tr>
          <td></td>
          <td><a href="#" target="_self">俺是会员，立即登录</a></td>
        </tr>
        <!-- 第十一行 -->
        <tr>
          <td></td>
          <td><h2>我承诺</h2></td>
        </tr>
        <!-- 第十二行 -->
        <tr>
          <td></td>
          <td>
            <ul>
              <li>年满18、单身</li>
              <li>态度严肃很</li>
              <li>额认真滴</li>
            </ul>
          </td>
        </tr>
      </table>
    </form>

    <!-- 关于对齐，用上述的表格来实现 -->
    <!-- <form action="http://urlll" method="post" name="signup">
      性别
      <input type="radio" name="sex" id="male" /><img src="/images/man.jpg" /><label for="male">男</label>
      <input type="radio" name="sex" id="female" /><img src="/images/women.jpg" /><label for="female">女</label>
      <br />
      生日
      <select value="--请选择年--">
        <option>--2077--</option>
        <option>--2078--</option>
      </select>
      <select>
        <option>--请选择月--</option>
        <option>--13--</option>
        <option>--请选择年--</option>
      </select>
      <select>
        <option>--请选择日--</option>
        <option>--31--</option>
        <option>--请选择年--</option>
      </select>
      <br />
      <select>
        <option>--请选择日--</option>
        <option>--31--</option>
        <option>--请选择年--</option>
      </select>
      <br />
      婚姻状况
      <input type="radio" name="sex" id="unmarried" /><label for="unmarried">未婚</label>
      <input type="radio" name="sex" id="married" /><label for="married">已婚</label>
      <input type="radio" name="sex" id="dismarried" /><label for="dismarried">离婚</label>
      <br />
      学历
      <input text="text" name="education" id="education" />
      <br />
      喜欢的类型
      <input type="checkbox" name="type" id="type1" /><label for="type1">妩媚的</label>
      <input type="checkbox" name="type" id="type2" /><label for="type2">可爱的</label>
      <input type="checkbox" name="type" id="type3" /><label for="type3">小鲜肉</label>
      <input type="checkbox" name="type" id="type4" /><label for="type4">老腊肉</label>
      <input type="checkbox" name="type" id="type4" /><label for="type4">都喜欢</label>
      <br />
      自我介绍
      <textarea name="content" id="content" cols="30" rows="2"></textarea>
      <br />
      <input type="submit" value="免费注册" />
      <br />
      <input type="radio" id="agree" /><label for="agree">俺同意注册条款和会员加入标准</label>
    </form>
    <a href="#" target="_self">俺是会员，立即登录</a>
    <h1>我承诺</h1>
    <ul>
      <li>年满18、单身</li>
      <li>态度严肃很</li>
      <li>额认真滴</li>
    </ul> -->
  </body>
</html>
